<!--编辑固件基本信息-->
<template>
  <el-dialog
    title="基本信息"
    :visible.sync="editInfoVisible"
    width="628px"
    :before-close="handleClose"
    :close-on-click-modal="false">
    <el-form ref="form" :rules="rules" :model="form" label-width="160px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="固件名称" prop="name">
            <template #label>
              <span>固件名称</span>&nbsp;
              <el-tooltip content="仅用于管理固件，不对外显示" placement="top">
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </template>
            <el-input
              v-model="form.name"
              class="name-input"
              maxlength="32"
              show-word-limit
              placeholder="请输入固件名称"></el-input>
          </el-form-item>
          <el-form-item label="固件类型" prop="componentType">
            <template #label>
              <span>固件类型</span>&nbsp;
              <el-tooltip placement="top">
                <template #content>
                  <p>①MCU SDK开发上传MCU固件时建议选择MCU固件;</p>
                  <p>②其他开发方式，主通讯固件请选择'模组固件;</p>
                  <p>③如果模组固件被占用，可以根据自己模组通讯类型选择;</p>
                  <p>④如果固件类型置灰不可选，请查看是否有相同类型的固件;</p>
                </template>
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </template>
            <span>{{ form.componentTypeName }}</span>
          </el-form-item>
          <el-form-item label="升级通道号" prop="upgradeChannelNumber">
            <template #label>
              <span>升级通道号</span>&nbsp;
              <el-tooltip placement="top">
                <template #content>
                  用于固件OTA对应升级，需要将通道号写入固件。(固件类型为模组固件、蓝牙固件、Zigbee固件、MCU固件已经写好)
                </template>
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </template>
            <span>{{ form.upgradeChannelNumber }}</span>
          </el-form-item>
          <el-form-item label="自定义编号" prop="customNumber">
            <template #label>
              <span>自定义编号</span>&nbsp;
              <el-tooltip placement="top">
                <template #content>
                  用于集中器等同一个PID设备内由于接入设备品牌不一致需要不同固件的设备使用，可不填。不填则根据默认方式进行填充。默认为0，即为常规通道
                </template>
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </template>
            <el-input
              v-model="form.customNumber"
              placeholder="请输入自定义编号"></el-input>
          </el-form-item>
          <el-form-item label="固件升级超时时间" prop="timeoutTime">
            <template #label>
              <span>固件升级超时时间</span>&nbsp;
              <el-tooltip content="用于规定OTA等待时间，超时判定为升级失败，可根据固件包大小和用户体验适当调整" placement="top">
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </template>
            <el-input v-model="form.timeoutTime" type="number" max="1800" min="1" placeholder="请输入1~1800">
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单次超时时长" prop="singleTimeout">
            <template #label>
              <span>单次超时时长</span>&nbsp;
              <el-tooltip content="1-120分钟" placement="top">
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </template>
            <el-input v-model="form.singleTimeout" type="number" max="120" min="1" placeholder="请输入">
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注说明" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              maxlength="200"
              show-word-limit
              placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="14" @click="handleClose">取消</el-button>
      <el-button type="primary" size="14" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { updateComponentInfo } from "@/api/product/firmware"
export default {
  name: "addFirmwareDialog",
  props: {
    rowsData: {
      type: Object,
      default: () => { }
    },
    queryComponentInfo: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      editInfoVisible: false, // 弹窗是否显示
      fileList: [], // 上传文件列表
      form: {
        id: '', // 固件ID
        name: '', // 固件名称
        componentType: '', // 固件类型
        componentTypeName: '', // 固件类型名称
        upgradeChannelNumber: '', // 升级通道号
        customNumber: 0, // 自定义编号
        timeoutTime: '', // 固件升级超时时间
        singleTimeout: '', // 单次超时时长
        description: '' // 备注说明
      },
      // 生成1到180的数字数组作为选项
      upgradeChannelOptions: Array.from({ length: 180 }, (_, index) => index + 1),
      rules: {
        name: [
          { required: true, message: '请输入固件名称', trigger: 'blur' }
        ],
        componentType: [
          { required: true, message: '请输入固件类型', trigger: 'blur' }
        ],
        upgradeChannelNumber: [
          { required: true, message: '请选择升级通道号', trigger: 'change' }
        ],
        timeoutTime: [
          { required: true, message: '请输入固件升级超时时间', trigger: 'blur' },
          { validator: this.validateTimeoutTime, trigger: 'blur' }
        ],
        singleTimeout: [
          { required: true, message: '请输入单次超时时长', trigger: 'blur' }
          // { validator: this.validateSingleTimeout, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    editInfoVisible(val) {
      if (val) {
        const newVal = this.rowsData
        this.form.id = newVal.id
        // this.form.name = newVal.name
        this.form.componentType = newVal.componentType
        this.form.componentTypeName = newVal.componentTypeName
        this.form.upgradeChannelNumber = newVal.upgradeChannelNumber
        this.form.customNumber = newVal.customNumber
        // this.form.timeoutTime = newVal.timeoutTime
        // this.form.description = newVal.description
      } else {
      // 关闭时可清理表单
      this.$refs.form?.resetFields()
      }
    }
  },
  created() { },
  methods: {
    // 固件升级超时时间校验提示
    validateTimeoutTime(rule, value, callback) {
      const regex = /^(?:1[0-7]\d{2}|1800|[1-9]\d{0,2})$/
      if (!regex.test(value)) {
        callback(new Error('请输入正确的固件升级超时时间'))
      } else {
        callback()
      }
    },
    // // 单次超时时长校验提示
    // validateSingleTimeout(rule, value, callback) {
    //   const regex = /^(?:1[0-1]\d|120|[1-9]\d?)$/
    //   if (!regex.test(value)) {
    //     callback(new Error('请输入正确的单次超时时长'))
    //   } else {
    //     callback()
    //   }
    // },
    // 新建固件弹窗关闭
    handleClose() {
      this.editInfoVisible = false
      this.$refs.form.resetFields()
      this.fileList = []
      this.uploadSuccessOrError = false
      this.firmwarePackage = {}
    },
    // 提交
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            ...this.form
          }
          updateComponentInfo(params).then(res => {
            this.$message.success('编辑固件基本信息成功')
            this.queryComponentInfo()
            this.editInfoVisible = false
          }).catch(err => {
            this.$message.error(err.message)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

